<template>
  <!-- 企业公共组件 -->
  <div class="company" :class="fix?'fixed':''">
      <!-- 个人封面 -->
       <div class="all">
        <!-- 头部 -->
       <head-usual :title="detailModel.MInfo.name" to="/"></head-usual>
        <!-- 公司信息 -->
        <div class="company-info" style="position:relative">
            <router-link class="getresume" v-if="detailModel.MInfo.ctype==1&&detailModel.MInfo.ispublic" :to="'/user/resume2/'+detailModel.MInfo.id">查看简历</router-link>
            <div class="company-info-hidder"></div>
            <dl>
                <dt class="company-logo01">
                    <img :src="detailModel.MInfo.headportrait"/>
                   
                </dt>
                <dd class="company-dd" >
                    <p class="company-dd-p1">{{detailModel.MInfo.name}}</p>
                    <div class="company-dd-p2">
                        <div class="company-dd-01 company-dd-squre" v-if="detailModel.MIcon.isRealName">
                            <img src="~@/assets/renzheng.png" class="company-dd-01-img"/>
                        </div>
                        <div class="company-dd-02 company-dd-squre" v-if="detailModel.MIcon.isPhone">
                            <img src="~@/assets/phone.png" class="company-dd-02-img"/>
                        </div>
                        <div class="company-dd-03 company-dd-squre" v-if="detailModel.MIcon.isEmail">
                            <img src="~@/assets/email.png" class="company-dd-03-img"/>
                        </div>
                        <!-- <div class="company-dd-04 company-dd-squre">
                            <img src="~@/assets/wechat.png" class="company-dd-04-img"/>
                        </div> -->
                        <div class="company-dd-05 company-dd-squre" v-if="detailModel.MIcon.isVip">
                            <img src="~@/assets/vip1.png" class="company-dd-05-img"/>
                        </div>
                        <div class="company-dd-06 company-dd-squre"  v-if="detailModel.MIcon.isCertificate">
                            <img src="~@/assets/small_zhengshu.png" class="company-dd-06-img"/>
                        </div>           
                    </div>
                    <p class="company-dd-p4">
                        <span  v-for="(item,index) in detailModel.MInfo.Arr_part" :key="index">{{item}}</span>
                    </p>
                    <p class="company-dd-p3">{{detailModel.MInfo.introduction}}</p>
                </dd>
            </dl>
            
            <div class="company-bottom">
                <div class="company-bottom-left">
                    <p>{{detailModel.Statistics.Score}}</p>
                    <p>综合评分</p>
                    <span class="company-bottom-fenge01"></span>
                </div>
                <div>
                    <p>{{detailModel.Statistics.CaseCount}} 个</p>
                    <p>项目作品</p>
                <span class="company-bottom-fenge02"></span>
                </div>
                <div>
                    <p>{{detailModel.Statistics.IngCount}} 个</p>
                    <p>正在施工</p>
                </div>
                <span class="company-bottom-fenge03"></span>
                <div>
                    <p>{{detailModel.Statistics.CommentCount}} 次</p>
                    <p>客户评论</p>
                </div>
            </div>
        </div>
    </div>
      <!-- 各个选项 -->
      <mt-navbar v-model="currentNav">
        <mt-tab-item id="1">首页</mt-tab-item>
        <mt-tab-item id="6">TA的晒场</mt-tab-item>
        <mt-tab-item id="7">TA的服务</mt-tab-item>
        <mt-tab-item id="3">项目作品</mt-tab-item>
        <mt-tab-item id="4">资质证书</mt-tab-item>
        <!-- <mt-tab-item id="5">服务评价</mt-tab-item> -->
        </mt-navbar>
        <!-- tab-container -->
        <mt-tab-container v-model="currentNav" swipeable>
        <mt-tab-container-item id="1">
            <!-- 首页 -->
            <index :id="id" v-if="currentNav==1"></index>
        </mt-tab-container-item>

         <mt-tab-container-item id="6">
            <!-- 晒场 -->
            <daily :id="id" v-if="currentNav==6"></daily>
        </mt-tab-container-item>
         <mt-tab-container-item id="7">
            <!-- 服务 -->
            <service :id="id" v-if="currentNav==7"></service>
        </mt-tab-container-item>

        <mt-tab-container-item id="2">
            <!-- 基本信息 -->
            <info :id="id" v-if="currentNav==2"></info>
        </mt-tab-container-item>
        <mt-tab-container-item id="3">
             <!-- 项目作品 -->
            <projects :id="id" v-if="currentNav==3"></projects>
        </mt-tab-container-item>
        <mt-tab-container-item id="4">
             <!-- 证书 -->
           <certificate :id="id" v-if="currentNav==4"></certificate>
        </mt-tab-container-item>
         <!-- <mt-tab-container-item id="5">
          
           <comment :id="id" v-if="currentNav==5"></comment>
        </mt-tab-container-item> -->
        </mt-tab-container>
      <company-footer  :cid="id" :type="3" @fix="handleShare" words="一起做项目"></company-footer>
  </div>
</template>

<script>
// import headUsual from '@/pages/components/headUsual';
import index from "@/pages/m/controls/index";
import info from "@/pages/m/controls/info";
import projects from "@/pages/m/controls/projects";
import certificate from "@/pages/m/controls/certificate";
import comment from "@/pages/m/controls/comment";
import companyFooter from "@/pages/components/footerBar";
import daily from "@/pages/m/controls/daily";
import service from "@/pages/m/controls/service";

import { GetDetail } from "@/api/zgz";
export default {
  data() {
    return {
      to:'/zgz  ',
      id: 0,
      fix:false,
      detailModel: {
        MInfo: {
          headportrait: ""
        },
        Statistics: {
          Score: 0
        },
        MIcon: {
          isRealName: false
        }
      },
      currentNav: "1"
    };
  },
  created() {
    this.id = parseInt(this.$route.params.id);
    this._GetDetail();
  },
  methods: {
    _GetDetail() {
      GetDetail(this.id).then(res => {
        if (res.StatusCode === 200) {
          this.detailModel = res.Data;
        }
      });
    },
    handleShare(fix){
    this.fix=fix;
  }
  },
  watch: {
    currentNav(val, oldVal) {
    }
  },
  components: {index, info, projects, certificate, comment, companyFooter, daily, service }
};
</script>

<style lang='scss' scoped>
@import '~@/css/total';
.fixed {
  position: fixed;
  left: 0;
  right: 0;
  
}
// 合作伙伴
.partner {
  padding-bottom: 100px;
}
//证书
.company-talk {
  padding-bottom: 100px;
}
// 个人封面
.all {
  background: #f4f4f4;
  height: 100%;
}
/* 头部 */
.header {
  height: 44px;
  background: #ffffff;
  line-height: 44px;
}
.header-left {
  display: block;
  float: left;
  font-size: 18px;
  margin-left: 10px;
  margin-top: 15.18px;
}
.header-middle {
  display: block;
  float: left;
  margin-left: 31px;
  width: 299.6px;
  height: 29.3px;
  background: #eeeeee;
  border-radius: 3px;
  line-height: 29.3px;
  margin-bottom: 7.35px;
  margin-top: 8.67px;
}
.header-middle > .icon {
  font-size: 16px;
  display: block;
  float: left;
  margin-left: 6px;
  margin-right: 5px;
  margin-top: 6.73px;
  color: #999999;
}
.header-middle > input {
  display: block;
  color: #999999;
  float: left;
  font-size: 12px;
  width: 261.3px;
  line-height: 29.3px;
  border: none;
  background: #eeeeee;
}
.header-right {
  display: block;

  float: right;
  font-size: 15px;
  margin-top: 15.18px;
  margin-right: 11px;
}
/* 企业信息 */
.company-info {
  height: 200px;
  background: url("~@/assets/company_bg.png") no-repeat center center;
  background-size: 100% 200px;
  position: relative;
  padding-left: 12px;
  background-color: rgba(100, 100, 100, 0.3);
}
/* 上方遮罩层 */
.company-info-hidder {
  width: 100%;
  height: 200px;
  background: black;
  position: absolute;
  opacity: 0.6;
  left: 0;
  top: 0;
}
.company-info > dl {
  position: absolute;
  display: flex;
}
.company-logo01 {
  display: inline-block;
  width: 68.66px;
  height: 68.66px;
  margin-left: 12px;
  margin-top: 24px;
}
.company-logo01 > img {
 width: 100%;
 height: auto;
 max-width: 100%;
 display: block;
}
.company-dd {
  margin-top: 24px;
  margin-left: 12px;
}
.company-dd-p1 {
  color: #ffffff;
  font-size: 18px;
  margin-bottom: 8.66px;
}
.company-dd-p2 {
  display: block;
  height: 18.3px;
  margin-bottom: 8.66px;
}
.company-dd-p3 {
  color: #999999;
  font-size: 14px;
  @include text-over(1);
}
.company-dd-p4 {
  overflow: hidden;
  margin-bottom: 6px;
  > span {
    display: block;
    float: left;
    color: #ffffff;
    border: 1px solid #e0e2e4;
    padding: 0 3px;
    margin-right: 9.5px;
  }
}
.company-dd-01 {
  width: 16.3px;
  height: 16.3px;
  background: #dcdcdc;
  text-align: center;
  display: block;
}
.company-dd-squre {
  width: 20px;
  height: 20px;
  text-align: center;
  display: block;
  float: left;
  margin-right: 3.5px;
}

.company-dd-01-img {
  width: 11.04px;
  height: 13px;
  display: block;
  margin: 3.66px auto;
}
.company-dd-02 {
  background: #ff9c00;
}
.company-dd-02-img {
  width: 8.17px;
  height: 13.9px;
  display: block;
  margin: 2.485px auto;
}
.company-dd-03 {
  background: #3887fe;
}
.company-dd-03-img {
  width: 13.42px;
  height: 9.76px;
  display: block;
  margin: 4.15px auto;
}
.company-dd-04 {
  background: #84d945;
}
.company-dd-04-img {
  width: 12.2px;
  height: 9.76px;
  display: block;
  margin: 4.15px auto;
}
.company-dd-05 {
  background: #e74445;
}
.company-dd-05-img {
  width: 10.98px;
  height: 9.028px;
  display: block;
  margin: 4.45px auto;
}
.company-dd-06 {
  background: #fbcd4f;
}
.company-dd-06-img {
  width: 14.64px;
  height: 14.64px;
  display: block;
  margin: 2.15px auto;
}

.company-dd-txt {
  display: block;
  float: left;
  font-size: 12px;
  color: #ffffff;
  margin-right: 6px;
  line-height: 16px;
}

/* 下方阴影栏 */
.company-bottom {
  width: 100%;
  height: 53.3px;
  background: rgba(22, 28, 41, 0.5);
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  text-align: center;
  align-items: center;
}
.company-bottom > div {
  width: 33.3%;
  color: #ffffff;
  font-size: 14px;
  text-align: center;
}
.company-bottom-fenge01 {
  position: absolute;
  left: 102px;
  top: 16px;
  width: 0px;
  height: 20px;
  background: #ffffff;
  border: 1px solid #ffffff;
}
.company-bottom-fenge02 {
  position: absolute;
  left: 204px;
  top: 16px;
  width: 0px;
  height: 20px;
  background: #ffffff;
  border: 1px solid #ffffff;
}
.company-bottom-fenge03 {
  position: absolute;
  left: 306px;
  top: 16px;
  width: 0px;
  height: 20px;
  background: #ffffff;
  border: 1px solid #ffffff;
}
.company .mint-navbar .mint-tab-item.is-selected{
  border-bottom: 2px solid #fd4f00;
    color: #fd4f00;
}
.mint-tab-item{
  color:#666666;
}
.getresume{
  color:  #fd4f00;
  position: absolute;
  font-size: 18px;
  top: 20px;
  right: 20px;
  z-index: 1;
}
</style>
